<template>
  <div>
    <div v-if="isEmpty && !isInChildren" class="empty" >
      条码
    </div>
    <div v-else>
      <JsBarcode v-if="codeType === 'barcode'" :value="value" :widthStyleObj="`width: ${StyleObj.width}px;`" :class="{'border_code': !isInChildren}" :style="`height: ${StyleObj.height}px; width: ${StyleObj.width}px; padding: ${isInChildren ? 0 : '5px'}`"/>
      <QRcode v-else :content="value" :height="StyleObj.width" :width="StyleObj.width" :class="{'border_code': !isInChildren}" />
    </div>
  </div>
</template>
<script>
import JsBarcode from './jsBarcode.vue'
import QRcode from './QRcode.vue'
export default {
  name: 'barcode',
  components: {
    JsBarcode,
    QRcode
  },
  props: {
    value: {},
    codeType: {
      Type: String,
      default: ''
    },
    isInChildren: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isEmpty() {
      console.log(this.value, 'this.value', !this.value)
      return !this.value && this.value !== '0' || !this.codeType
    },
    StyleObj() {
      if (this.isInChildren) {
        return {
          width: 40,
          height: 30
        }
      } else {
        return {
          width: 160,
          height: 120
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .empty {
    line-height: 28px;
    background-color: #f5f5f5;
    height: 80px;
    width: 160px;
    padding-top: 40px;
    text-align: center;
    color: #c8c9cc;
  }
  .border_code {
    border: 1px solid rgb(230, 230, 230);
  }
</style>